<script setup lang="ts">
import { ref, onMounted } from 'vue';

import { useMouse } from '../utils/mouse'
import { reg } from '../utils/request'
import { useRouter } from 'vue-router';
const router = useRouter();

const email = ref('');
const username = ref('');
const password = ref('');
const confirmPassword = ref('');

const age = ref()
const realName = ref('')
const stuNum = ref('')
const className = ref('23软件技术1班')
const register = async () => {
  // 这里可以添加注册逻辑
  if (password.value !== confirmPassword.value) {
    alert('两次输入的密码不一致');
    return;
  }
  //console.log('Registering with:', email.value, password.value);
  // 注册成功后跳转到首页
  const r = await reg({
    username: username.value,
    email: email.value,
    pwd: password.value,
    age: age.value,
    realName: realName.value,
    stuNum: stuNum.value,
    className: className.value
  });
  console.log(r);
  if (r.errno) return alert(r.message);
  else
    router.push('/login');
};
const { x, y } = useMouse()
onMounted(() => {
  console.log('在组件Register里调用：Mouse position is at:', x.value, y.value);
});




</script>

<template>
  <!-- 
Mouse position is at: {{ x }}, {{ y }} -->

  <div class="auth-container">
    <h2>注册</h2>
    <div class="input-container">
      <input v-model="username" placeholder="用户名" />
    </div>

    <div class="input-container">
      <input v-model="password" type="password" placeholder="密码" />
    </div>
    <div class="input-container">
      <input v-model="confirmPassword" type="password" placeholder="确认密码" />
    </div>
    <div class="input-container">
      <input v-model="realName" placeholder="姓名" />
    </div>
    <div class="input-container">
      <input v-model="stuNum" type="number" placeholder="学号" />
    </div>
    <div class="input-container">
      <input v-model="age" type="number" placeholder="年龄" />
    </div>
    <div class="input-container">
      <input v-model="email" type="email" placeholder="邮箱" />
    </div>
    <div class="input-container">

      <el-select v-model="className" placeholder="选择班级" size="large" style="width: 240px">
        <el-option :key="1" label="23软件技术1班" value="23软件技术1班" />
        <el-option :key="2" label="23软件技术2班" value="23软件技术2班" />
      </el-select>
    </div>
    <div class="input-container">
      <button @click="register">注册</button>
    </div>
    <div class="auth-link">
      <RouterLink to="/login">已有账号？登录</RouterLink>
    </div>
    <div class="home-link">
      <RouterLink to="/">返回首页</RouterLink>
    </div>
  </div>
</template>

<style scoped>
.auth-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 2rem;
  background-color: #e6f7ff;
  /* 恢复浅蓝色背景 */
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.input-container {
  margin-bottom: 1rem;
}

.auth-link {
  display: block;
  margin-top: 1rem;
  color: #1890ff;
  /* 恢复蓝色链接 */
  text-decoration: none;
}

.auth-link:hover {
  text-decoration: underline;
}

.input-container button {
  padding: 0.75rem 1.5rem;
  border: none;
  background-color: #1890ff;
  /* 恢复蓝色按钮 */
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.input-container button:hover {
  background-color: #107ad9;
  /* 悬停时深蓝色 */
}

.home-link {
  margin-top: 1rem;
  text-align: center;
}

.home-link a {
  color: #1890ff;
  /* 蓝色链接 */
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
}

.home-link a:hover {
  text-decoration: underline;
}
</style>